
 <template>
 	<block>
 	<view class="topcontain">
 		<swiper  :autoplay="true" :interval="3000" :duration="500" class="swipercont">
 			<swiper-item>
 				<view class="swiper-item">
 					<image src="../../../static/image/prod2.png" mode=""></image>
 				</view>
 			</swiper-item>
 		</swiper>
 		<view class="postioncont">
 			<view class="posiicon">
 				<uni-icons type="location-filled" size="22" color="#fff"></uni-icons>
 			</view>
 			<view class="posititle_cont">
 				<view class="posititle">
 					青岛世贸中心店
 				</view>
 				<view class="far_sub">
 					距您500m
 				</view>
 			</view>
 		</view>
 	</view>
 	<view class="content">
 		<scroll-view scroll-y class="left-aside">
 			<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{active: item.id === currentId}" @click="tabtap(item)">
 				{{item.name}}
 			</view>
 		</scroll-view>
 		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" @scrolltolower="scrollBtom" :scroll-top="tabScrollTop">
 			<view v-for="item in slist" :key="item.id" class="s-list" :id="'main-'+item.id">
 				<text class="s-item">{{item.name}}</text>
 				<view class="t-list">
 					<view @click="navToList(item.id, titem.id)" v-if="titem.pid === item.id"  class="items" v-for="titem in tlist" :key="titem.id">
 						<view class="images">
 							<image :src="titem.picture" mode="" width="100%" height="100%"></image>
 						</view>
 						<view class="nodes">
 							<view class="nodes_sup">
 								azsdadasdasdadasdasd
 							</view>
 							<view class="nodes_sub">
 								测试测试测试测试测试测试测试测试测试
 							</view>
 							<view class="price_pro">
 									<view class="pricecont">
 										<view class="price">
 											<text class="icon">￥</text>
 											<text class="num">1233</text>
 										</view>
 										<view class="discont">
 											<text>￥</text>
 											<view class="discon">
 											23123
 											</view>
 										</view>
 									</view>
 									<uni-icons type="plus-filled"color="#4863EA" size="26" @click.native.stop="addCart()"></uni-icons>
 							</view>
 						</view>
 					
 					</view>
 				</view>
 			</view>
 		</scroll-view>
 	</view>
 	</block>
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
 				sizeCalcState: false,
 				tabScrollTop: 0,
 				currentId: 1,
 				flist: [
					{
							id: 1,
							name: '智能空调'
						},
						{
							id: 2,
							name: '家用洗衣机'
						},
						{
							id: 3,
							name: '厨卫大电'
						},
						{
							id: 4,
							name: '生活电器'
						},
						{
							id: 5,
							name: '卫浴'
						},
				],
 				slist: [
					{
						id: 5,
						pid: 1,
						name: '智能空调'
					},
					{
						id: 6,
						pid: 2,
						name: '家用洗衣机'
					},
					{
						id: 7,
						pid:3,
						name: '厨卫大电',
					},
				{
					id: 8,
					pid:4,
					name: '生活电器',
				},
				{
					id: 9,
					pid:5,
					name: '卫浴',
				},
				],
 				tlist: [
					{
						id: 8,
						pid: 5,
						name: '全面屏手机',
						picture: '/static/temp/cate2.jpg'
					},
					{
						id: 9,
						pid: 5,
						name: '游戏手机',
						picture: '/static/temp/cate3.jpg'
					},
					{
						id: 10,
						pid: 6,
						name: '老人机',
						picture: '/static/temp/cate1.jpg'
					},
					{
						id: 11,
						pid: 6,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 12,
						pid: 6,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},{
						id: 13,
						pid:6,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},{
						id: 14,
						pid:6,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 15,
						pid: 7,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 15,
						pid: 7,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 15,
						pid: 7,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 15,
						pid: 7,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 15,
						pid: 7,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 15,
						pid: 7,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 15,
						pid: 7,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					
					{
						id: 15,
						pid: 7,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},{
						id: 15,
						pid: 7,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},{
						id: 15,
						pid: 8,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},{
						id: 15,
						pid:8,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},{
						id: 15,
						pid: 8,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},{
						id: 15,
						pid:8,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},{
						id: 15,
						pid: 8,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 16,
						pid: 8,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id:17,
						pid: 9,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 18,
						pid: 9,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},	{
						id: 16,
						pid: 9,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id:17,
						pid: 9,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 18,
						pid: 9,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
				],
 			}
 		},
 		onLoad(){
 			// this.loadData();
			this.calcSize();
 		},
 		methods: {
 			// async loadData(){
 			// 	let list = await this.$api.json('cateList');
 			// 	list.forEach(item=>{
 			// 		if(!item.pid){
 			// 			this.flist.push(item);  //pid为父级id, 没有pid或者pid=0是一级分类
 			// 		}else if(!item.picture){
 			// 			this.slist.push(item); //没有图的是2级分类
 			// 		}else{
 			// 			this.tlist.push(item); //3级分类
 			// 		}
 			// 	}) 
 			// },
 			//一级分类点击
 			tabtap(item){
 				if(!this.sizeCalcState){
 					this.calcSize();
 				}
 				
 				this.currentId = item.id;
				
 				let index = this.slist.findIndex(sitem=>sitem.pid === item.id);
				console.log(index)
 				setTimeout(()=>{this.tabScrollTop = this.slist[index].top+5;},10)
				console.log(this.slist[0])
 			},
 			//右侧栏滚动
 			asideScroll(e){
 				if(!this.sizeCalcState){
 					this.calcSize();
 				}
 				let {scrollTop,scrollBottom} = e.detail;
 				let tabs = this.slist.filter(item=>item.top <= scrollTop).reverse();
 				if(tabs.length > 0){
 					this.currentId = tabs[0].pid;
 				}
				
 			},
			scrollBtom(){
				var cur = this.currentId+1;
				console.log(cur)
			},
 			//计算右侧栏每个tab的高度等信息
 			calcSize(){
 				let h = 0;
 				this.slist.forEach(item=>{
 					let view = uni.createSelectorQuery().select("#main-" + item.id);
 					view.fields({
 						size: true
 					}, data => {
 						item.top = h;
 						h += data.height;
 						item.bottom = h;
 					}).exec();
 				})
 				this.sizeCalcState = true;
 			},
 			navToList(sid, tid){
 				//在这里跳转到商品详情
				console.log(sid)
				console.log(tid)
 			},
			addCart(){
				console.log("add")
			}
 		}
 	}
 </script>
 
 <style lang='scss'>
 	page,
 	.content {
 		height: 100%;
 		background-color: #f8f8f8;
 	}
 	.content{
 		margin-top: 130rpx;
 		
 	}
 .topcontain{
 	padding: 0 17rpx 0 19rpx;
 	box-sizing: border-box;
 	width:100%;
 	height: 388rpx;
 	background:#4863EA;
 	background-size: 100% 100%;
 }
 .topcontain .swipercont{
 	width: 100%;
 	margin-top: var(--status-bar-height);
 	height: 247rpx;
 	border-radius: 4px;
 	background-color: #007AFF;
 }
 .topcontain .swipercont swiper-item{
 	height: 100%;
 	width: 100%;
 }
 .topcontain .swipercont swiper-item .swiper-item, .swiper-item image{
 	height: 100%;
 	width: 100%;
 }
 .postioncont{
 	width: 714rpx;
 	height: 96rpx;
 	background-color: #fff;
 	margin-top: 17rpx;
 	position: absolute;
 	border-radius: 4px;
 	display: flex;
 	align-items: center;
 
 }
 .postioncont .posiicon{
 	width: 57rpx;
 	height: 57rpx;
 	margin:0 19rpx ;
	background-color: $base-color;
	text-align: center;
	line-height: 57rpx;
	border-radius: 15rpx;
 }
 .posiicon image{
 	height: 100%;
 	width: 100%;
 }
 .posititle_cont{
 		height: 100%;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 }
 .posititle{
 	font-size: 26rpx;
 	font-weight: 900;
 }
 .far_sub{
 	font-size: 19rpx;
 	color: #7B7B7C;
 }
 	.content {
 		display: flex;
 	}
 	.s-list{
 		background-color: #ffffff;
 	}
 	.left-aside {
 		flex-shrink: 0;
 		width: 200upx;
 		height: 100%;
 		background-color: #f8f8f8;
 	}
 	.f-item {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		width: 100%;
 		height: 100upx;
 		font-size: 28upx;
 		color: $font-color-base;
 		position: relative;
 		&.active{
 			color: #000;
			font-weight: 900;
 			background: #fff;
 			&:before{
 				content: '';
 				position: absolute;
 				left: 0;
 				top: 50%;
 				transform: translateY(-50%);
 				height: 36upx;
 				width: 8upx;
 				background-color: $base-color;
 				border-radius: 0 4px 4px 0;
 				opacity: .8;
 			}
 		}
 	}
 
 	.right-aside{
 		flex: 1;
 		overflow: hidden;
 		background-color: #fffff;
 	
 	}
 	.s-item{
 		display: flex;
 		align-items: center;
 		height: 70upx;
 		padding: 8upx 0 0 28rpx;
 		font-size: 24rpx;
 		color: #000;
		font-weight: 900;
 		background-color: #fffff;
 	}
	.s-list:last-child .items:last-child{
		border: none;
	}
 	.t-list{
 		display: flex;
 		flex-wrap: wrap;
 		width: 100%;
 		background: #fff;
 		padding-top: 12upx;
 		&:after{
 			content: '';
 			flex: 99;
 			height: 0;
 		}
 	}
 	.t-item{
 		flex-shrink: 0;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		flex-direction: column;
 		width: 176upx;
 		font-size: 26upx;
 		color: #666;
 		padding-bottom: 20upx;
 		
 		image{
 			width: 140upx;
 			height: 140upx;
 		}
 	}
 	.items{
 		font-size: 28upx;
 		width: 100%;
 		display: flex;
 		box-sizing: border-box;
 		justify-content: space-between;
 		border-bottom: 1px solid #f3f3f3;
 		padding: 28upx 0;
 	
 	}
	.items:first-child{
		padding-top:0 ;
	}
 	
 	 .items .images{
 		width: 169upx;
 		height: 169upx;
 	}
 	 .items image{
 		width: 169upx;
 		height: 169upx;
 	}
 	 .items .nodes{
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
 		margin-left: 20upx;
 		padding-right: 38rpx;
 	}
 	.nodes_sup{
 		font-size: 28upx;
 		font-weight: 900;
 	}
 	.nodes_sub{
 		font-size: 26upx;
 	
 		color: #9c9c9c;
 		margin-top: 10upx;
 		line-height: 33upx;
 	}
 	.price_pro{
 		display: flex;
 		justify-content: space-between;
 		height: 45upx;
 		margin-top: 10upx;
 		align-items: center;
 	}
 	.pricecont{
 		width: 165upx;
 		font-size: 26upx;
 		display: flex;
 	
 		color: #f23b17;
 	}
 	.price{
 		color: #f23b17;
 		
 	}
 	.discont{
 		display: flex;
 		font-size: 24upx;
 		align-items: center;
 		margin-left: 10upx;
 		color: #9c9c9c;
 		text-decoration: line-through;
 	}
 </style>
 